<!DOCTYPE html>
<html lang="zh-CN" class="h-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{{url_for('static',filename='images/2747.jpg')}}" sizes="32x32" type="image/png">
    <link rel="shortcut icon" href="{{url_for('static',filename='images/2747.jpg')}}" sizes="32x32" type="image/png">
    <title>{% block title %}{% endblock %}</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="{{url_for('static',filename='bootstrap-5.3.2-dist/css/bootstrap.min.css')}}" rel="stylesheet">
    <link href="{{url_for('static',filename='css/base.css')}}" rel="stylesheet">
    {% block head %}{% endblock %}
</head>
<body class="d-flex flex-column h-100">
<!--顶部导航栏-->
<nav class="navbar navbar-expand sticky-bottom text-white d-md-none"> <!-- d-md-none 表示在md及以上尺寸隐藏 -->
    <a data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
        <img class="rounded-circle" style="width:40px;height:40px;"
             src="{{url_for('static',filename='images/2747.jpg')}}" alt="头像">
    </a>
    <ul class="navbar-nav ms-auto">
        <li class="nav-item nav-link">登录</li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                昵称
            </a>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">退出</a></li>
            </ul>
        </li>
        <!--    <li class="nav-item">-->
        <!--      <img class="rounded-circle me-2" style="width:40px;height:40px;"-->
        <!--           src="{{url_for('static',filename='images/2747.jpg')}}" alt="头像">-->
        <!--    </li>-->
    </ul>
</nav>
<!--侧边拦-->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
     id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="mt-4">
        <p class="offcanvas-title text-center text-white" id="offcanvasExampleLabel">Set</p>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body d-flex flex-column justify-content-between mt-4">
        <div class="d-flex flex-column align-items-center gap-3" style="flex-grow: 1;">
            <!-- 这里放置四个图标 -->
            <a href="{{url_for('navigation.index')}}"><img src="{{url_for('static',filename='/images/48/30.png')}}" alt="Icon 1"
                                                 class="icon"></a>
            <a href="http://www.baidu.com/"><img src="{{url_for('static',filename='/images/48/30.png')}}" alt="Icon 1"
                                                 class="icon"></a>
            <a href="http://www.baidu.com/"><img src="{{url_for('static',filename='/images/48/30.png')}}" alt="Icon 1"
                                                 class="icon"></a>
            <a href="http://www.baidu.com/"><img src="{{url_for('static',filename='/images/48/30.png')}}" alt="Icon 1"
                                                 class="icon"></a>
            <a href="http://www.baidu.com/"><img src="{{url_for('static',filename='/images/48/30.png')}}" alt="Icon 1"
                                                 class="icon"></a>
        </div>
    </div>
    <form action="" method="post">
        <button type="button" class="btn btn-sm mb-2 text-white" style="width: 60px; height: 30px;padding: 2px 8px;">
            登录
        </button>
    </form>

</div>

<section class="p-2 flex-grow-1">
    {% block body %}
    {% endblock %}
</section>

<!--底部栏-->
<footer class="footer mt-auto py-3 bg-dark text-center text-muted">
    <div class="container text-white">
        &copy; 2024 lingyiling. All rights reserved. |
        Contact us at: <a href="313105641@qq.com" class="text-reset">support@example.com</a> |
        Follow us on <a href="#" class="text-reset">小红书</a> and <a href="#" class="text-reset">公众号</a>.
    </div>
</footer>

{% block footer %}{% endblock %}
<script src="{{url_for('static',filename='bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{url_for('static',filename='js/base.js')}}"></script>
</body>
</html>